<template>
	<view class="container">
		<uv-navbar title="纸上良宸" @leftClick="leftClick"  :fixed="false" >
		</uv-navbar>
		<div class="banner">
			<uv-navbar title="我的" autoBack  bgColor="transparent" >
				<template slot="left">
					<view></view>
				</template>
				<template slot="center">
					<!-- <view style="color: #fff;">我的</view> -->
				</template>
			</uv-navbar>
			<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseavatar">
				<image :src="userInfo.avatarUrl" mode="aspectFit" style="width: 100%; height: 100%;"></image>
			</button>
			<input type="nickname" @blur="saveInfo" v-model="userInfo.nickName" class="name-input">
		<!-- 	<button class="zxkf" open-type="contact">
				<image src="../../static/kefuact.png" mode="aspectFit"></image>
			</button> -->
		</div>
		<view class="ui-all">
		<!-- 	<uv-form-item label="用户昵称" prop="company"  label-width="100">
				<uv-input border="none" type="nickname" v-model="userInfo.nickName" @input="saveInfo" placeholder="请填写用户昵称">
				</uv-input>
			</uv-form-item> -->
			<!-- <uv-form-item label="手机号" prop="company" borderBottom label-width="100">
				<uv-input border="none" type="tel" v-model="userInfo.contactNumber" @input="saveInfo" placeholder="请填写手机号">
				</uv-input>
			</uv-form-item> -->
		<!-- 	<uv-form-item label="性别" prop="educationLevel" borderBottom label-width="100">
				<uv-radio-group v-model="userInfo.gender">
					<uv-radio :customStyle="{margin: '8px'}" label="男" :name="0" />
					<uv-radio :customStyle="{margin: '8px'}" label="女" :name="1" />
				</uv-radio-group>
			</uv-form-item> -->
		<!-- 	<uv-form-item label="预约咨询" prop="company"  label-width="100" @click="tozx"  borderBottom>
				<template slot="right">
					<image src="/static/arr-r.png" class="arr" mode="aspectFit"></image>
				</template>
			</uv-form-item> -->
		<!-- 	<uv-form-item label="邀请好友" prop="company"  label-width="100" @click="showCode" borderBottom>
				<template slot="right">
					<image src="/static/arr-r.png" class="arr" mode="aspectFit"></image>
				</template>
			</uv-form-item> -->
		<!-- 	<uv-form-item label="在线客服" prop="company"  label-width="100"   borderBottom >
				<template slot="right">
					<image src="/static/arr-r.png" class="arr" mode="aspectFit"></image>
				</template>
				<button open-type="contact" class="contact">
				</button>
			</uv-form-item> -->
			<!-- <button class="save" @click="saveInfo">保 存 修 改</button> -->

			<view class="h1" @click="toDetail(childrenUser)">我的邀请人数: {{childrenUser.length}} 人</view>
		<!-- 	<view class="bottom-content">
				<view class="item-box" v-for="ele in childrenUser" :key="ele.openid" @click="toDetail(ele)">
					<image :src="ele.avatarUrl" mode=""></image>
					<view>{{ele.nickName}}</view>
				</view>
			</view> -->
			<!-- <uv-form-item  prop="company"  label-width="100" borderBottom v-for="ele in childrenUser" :key="ele.openid">
				<template slot="label">
					<image :src="ele.avatarUrl" mode="aspectFit" style="width: 100upx; height: 100upx;border"></image>
				</template>
				<template slot="right">
					{{ele.nickName}}
				</template>
			</uv-form-item> -->
		<!-- 	<view class="children-box" v-if="childrenUser.length">
				<view class="item" v-for="ele in childrenUser" :key="ele.openid" @click="openModal(ele)">
					<image :src="ele.avatarUrl" mode="aspectFit"
						style="width: 100upx; height: 100upx; margin-bottom: 10upx;background-color: #c5c5c5;border-radius: 50%;"></image>
					<view class="tit">{{ele.nickName}}</view>
				</view>
			</view> -->
		</view>
		
		<uv-modal ref="modal" :title="modalInfo.nickName" confirmColor="#FFA500">
			<view class="slot-content" >
				<scroll-view scroll-y="true" style="max-height: 500upx; overflow: auto;">
					<view class="bottom-content">
						<view class="item-box" v-for="ele in childrenUser" :key="ele.openid" @click="toDetail(ele)">
							<image :src="ele.avatarUrl" mode=""></image>
							<view>{{ele.nickName}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uv-modal>
		<!-- <yqTemp :count="childrenUser.length" :codeUrl="codeUrl" @showDetail="toDetail" /> -->
		<!-- <uv-modal ref="modalCode" title="分享二维码" confirmColor="#FFA500"> -->
		<view class="fx-box">
			<view class="slot-content" v-if="codeUrl">
				<image :src="codeUrl" mode="aspectFit" style="height: 500upx;height: 500upx;" ></image>
				<view style="display: flex;gap: 10px;">
					<button class="share-btn" @click="saveImg">
						保存图片
					</button>
					<button class="share-btn" open-type="share">
						邀请好友
					</button>
				</view>
			</view>
		</view>
		<!-- <view class="grid-box">
			<view class="ele box1"  >
				<image src="../../static/a1.png" mode="aspectFit" style="width: 150upx; height: 150upx;"></image>
				<view>
					<view>累计邀请人数</view>
					<view class="red">3人</view>
				</view> 
			</view>
			<view class="ele box2">
				 <image :src="codeUrl" style="width: 150upx; height: 150upx;" mode="aspectFit"></image>
				 <view>分享二维码</view>
			</view>
			<button class="ele box3" open-type="share" >
				<image src="../../static/a2.png" style="width: 150upx; height: 150upx;" mode="aspectFit"></image>
				<view>链接分享</view>
			</button>
		</view> -->
		<!-- </uv-modal> -->
		<userInfoModel ref="userInfoModelRef" @getInfo="getInfo"/>
	</view>
</template>

<script>
	import yqTemp from '../yq/yq.vue'
	import userInfoModel from '@/components/userInfoModel/userInfoModel.vue'
	import {
		getUserInfo,
		getChildren,
		getShareCode,
		userInfoUpdate
	} from '@/api'
	import { downloadImage } from '@/utils/utils.js'
	export default {
	
		components: { yqTemp, userInfoModel },
		data() {
			return {
				inviteCode: "",
				codeUrl: '',
				modalInfo: {},
				index: 0,
				region: ['请填写'],
				date: '请填写',
				userInfo: {
					
				},
				childrenUser: []
			}

		},
		methods: {
			leftClick() {
				this.$emit('goHome')
			},
			getInfo(data) {
				this.userInfo.nickName = data.nickName
				this.userInfo.avatarUrl = data.avatarUrl
				this.saveInfo()
			},
			toDetail(obj) {
				if(!this.childrenUser.length) return
				// uni.navigateTo({
				// 	url: '/pages/userDetail/userDetail'
				// })
				this.$refs.modal.open()
			},
			tozx() {
				uni.switchTab({
					url: '/pages/yyzx/yyzx'
				})
			},
			async saveInfo() {
				await userInfoUpdate({
					"openid": this.userInfo.openid,
					"nickName": this.userInfo.nickName,
					"avatarUrl": this.userInfo.avatarUrl
				})
				uni.setStorageSync('userinfo', JSON.stringify(this.userInfo))
				uni.showToast({
					icon: 'success',
					title: '保存成功'
				})
			},
			saveImg() {
				let base64Image = this.codeUrl;
				// 去除 base64 编码中的头部信息，如 "data:image/jpeg;base64,"
				const base64Data = base64Image.replace(/^data:image\/\w+;base64,/, "");
				// 生成临时文件名
				const fileName = `temp-${Date.now()}.png`;
				// 写入临时文件
				wx.getFileSystemManager().writeFile({
					filePath: `${wx.env.USER_DATA_PATH}/${fileName}`,
					data: base64Data,
					encoding: "base64",
					success: () => {
						// 保存图片到相册
						wx.saveImageToPhotosAlbum({
							filePath: `${wx.env.USER_DATA_PATH}/${fileName}`,
							success: (res) => {
								uni.showToast({
									icon: 'success',
									title: '已保存至相册'
								})
								console.log("保存成功", res);
							},
							fail: (err) => {
								console.error("保存失败", err);
							},
						});
					},
					fail: (err) => {
						console.error("写入临时文件失败", err);
					},
				});
			},
			showCode() {
				// uni.navigateTo({
				// 	url:'/pages/yq/yq'
				// })
				this.$refs.modalCode.open()
			},
			openModal(item) {
				this.modalInfo = item
				this.$refs.modal.open();
			},
			async init() {
				const userInfo = JSON.parse(uni.getStorageSync('userinfo'))
				this.userInfo = userInfo

				const cRes = await getChildren()
				this.childrenUser = cRes.rows
				this.inviteCode = userInfo.inviteCode
				getShareCode({
					"page": "pages/index/index",
					"scene": this.inviteCode,
					"check_path": false,
					"env_version": "trial"
				}).then(d => {
					this.codeUrl = 'data:image/png;base64,' + d.data.buffer
				})
				
				if(!this.userInfo.nickName || this.userInfo.nickName === '微信用户') {
					this.$refs.userInfoModelRef.authLogin()
				}
				
			},
			async chooseavatar(data) {
				this.userInfo.avatarUrl = await downloadImage(data.detail.avatarUrl)
				this.saveInfo()
			},
		},
		mounted() {
			this.init()
		}
	}
</script>

<style lang="less" scoped>
	.grid-box {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
		padding: 10px;
		height: 400upx;
		.ele {
			height: 200upx;
			background-color: #fff;
		}
		.box1 { 
			grid-area: 1 / 1 / 2 / 5; 
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			text-align: center;
			display: j;
			.red {
				color: red;
			}
		}
		.box2 { 
			grid-area: 2 / 1 / 3 / 3; 
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			flex-direction: column;
		}
		.box3::after {
			border: none;
		}
		.box3 { 
			display: block;
			width: 100%;
			border: none;
			grid-area: 2 / 3 / 3 / 5; 
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			flex-direction: column;
		}
	}
	.fx-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20upx;
	}
	.arr {
		width: 50upx; height: 50upx;
		margin-bottom: -15rpx;
	}
	.bottom-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20upx;
		.item-box {
			display: flex;
			justify-content: space-between;
			padding: 10upx;
			align-items: center;
			color: #8e8e93;
			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				background-color: #eee;
			}
		}
	}
	.contact {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		display: block;
		padding: 0;
		margin: 0;
		background-color: transparent;
	}
	.contact::after {
		border: none;
	}
	.container {
		display: block;
		.banner {
			height: 300upx;
			background: linear-gradient(to bottom, #FFA500, #e8c00f);
			position: relative;
			.zxkf {
				position: absolute;
				right: 20upx;
				bottom: 30upx;
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				background-color: transparent;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.zxkf::after {
				border: none;
			}
			.name-input {
				position: absolute;
				    color: #fff;
				    bottom: 41px;
				    left: 203rpx;
			}
			.name-input:focus {
				color: #fff;
			}
			
			.avatar::after {
				border: none;
			}
			.avatar {
				width: 100%;
				text-align: left;
				padding:  0;
				display: flex;
				align-items: center;
				background-color: transparent;
				outline: none;
				box-shadow: 0 0 0;
				margin: auto;
			    position: absolute;
			    left: 20px;
			    bottom: 20px;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;
			
				.chooseavatar {
					display: inline-block;
					width: 300rpx;
					background: transparent;
					border: none;
					outline: none;
					box-shadow: 0 0 0 0;
				}
			
				.imgAvatar {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					display: inline-block;
					vertical-align: middle;
					overflow: hidden;
			
					.iavatar {
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			
				text {
					display: inline-block;
					vertical-align: middle;
					color: #8e8e93;
					font-size: 28rpx;
					margin-left: 40rpx;
				}
			
				// &:after {
				// 	content: ' ';
				// 	width: 20rpx;
				// 	height: 20rpx;
				// 	border-top: solid 1px #030303;
				// 	border-right: solid 1px #030303;
				// 	transform: rotate(45deg);
				// 	-ms-transform: rotate(45deg);
				// 	/* IE 9 */
				// 	-moz-transform: rotate(45deg);
				// 	/* Firefox */
				// 	-webkit-transform: rotate(45deg);
				// 	/* Safari 和 Chrome */
				// 	-o-transform: rotate(45deg);
				// 	position: absolute;
				// 	top: 85rpx;
				// 	right: 0;
				// }
			}
		}
	}
	.share-btn {
		border: none;
		background-color: #FFA500;
		color: #fff;
		flex: 1;
	}
	.share-btn::after {
		border: none;
	}

	.h1 {
		margin-top: 30upx;
		font-weight: bold;
		font-size: 32upx;
	}

	.children-box {
		padding: 10upx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;

		.item {
			padding-top: 11rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			color: #1f1f1f;
		}
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar::after {
			border: none;
		}

		


		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #0CC161;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}

		.button {
			width: 100%;
			opacity: 0;
			position: absolute;
		}
	}
</style>